<template>
  <div class="conter">
    <div class="bock">
      <div class="bock_left">
        <div class="bock_left_top" v-for="(arrs,index) in arr" :key="index">
          <el-button @click="btnchuan(arrs)" round type="info" plain>{{arrs.name}}</el-button>
        </div>
      </div>
      <div class="bock_right">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        { name: "考试单选", path: "/ItemManagement/danxuan?name=考试单选" },
        { name: "考试多选", path: "/ItemManagement/Multiplechoice?name=考试多选" },
        { name: "考试判断", path: "/ItemManagement/judge?name=考试判断" },
        { name: "考试简答", path: "/ItemManagement/danxuan?name=考试简答" },
        { name: "考试填空", path: "/ItemManagement/danxuan?name=考试填空" },
      ]
    };
  },
  methods: {
    btnchuan(data) {
      console.log(this.$route.path)
      console.log(data);
      if(this.$route.path == data.path){
        console.log(1)
      }else{
        this.$router.push(data.path);
      }
    },
  },
};
</script>

<style scoped>
.conter {
  width: 90%;
  margin: auto;
}
.bock {
  margin: auto;
  width: 1000px;
  margin-top: 20px;
  height: 800px;
}
.bock_left {
  float: left;
  width: 24%;
  background-color: whitesmoke;
  height: 100%;
  border-radius: 35px;
  border-style: inset;
}
.bock_right {
  float: right;
  width: 75%;
  height: 100%;
}
.bock_left_top {
  text-align: center;
  width: 100%;
  margin-top: 8%;
}
</style>